<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{ msg }}
  <h2>{{web.title}}</h2>
  <h2>{{web.url}}</h2>
  <h2>{{number}}</h2>
  <h2>{{web.user}}</h2>

  <button v-on:click="edit">修改</button><br>
  <button @click="add(10,10)">修改简写</button>

  回车 <input type="text" @keyup.enter="add(20,20)"><br>
  空格 <input type="text" @keyup.space="add(20,20)"><br>
  Tab <input type="text" @keyup.tab="add(20,20)"><br>
  a <input type="text" @keyup.a="add(20,20)"><br>
  Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(20,20)"><br>
  Ctrl + A <input type="text" @keyup.ctrl.a="add(20,20)"><br>
</div>
<script type="module">
  import {createApp,reactive,ref} from "./vue.esm-browser.js";

  createApp({
    setup(){
      const number=ref(10)
      number.value=20
      const web = reactive({
        title:"浙工贸",
        url:"zjitc.net",
        user: 0
      })

      web.title="浙江工贸职业技术学院"

      const edit=()=>{
        web.url=www.zjitc.net
      }

      const add=(a,b)=>{
        web.user+=a+b;
      }

      return{
        msg:"success",
        web,
        number,
        edit,
        add
      }
    }
  }).mount("#app")
</script>
</body>
</html>